const urlid = window.sessionStorage.getItem('urlid')
if (!urlid) window.location.href = "./index.html"

init()

function init() {
    bindHTML(urlid)
    others()
    sortHandler()
}

function bindHTML() {
    //渲染列表栏二级菜单
    pAjax({
        url: 'https://www.lemall.com/api/cate/secondlist.html',
        data: {
            visitPath: `${urlid}-1-0`
        },
        dataType: 'json'
    }).then(res => {
        const leftBox = document.querySelector(".list-show-left>dl")
        let str = `<dt><span>${res.data.productCate.name}</span></dt>`;
        res.data.childCates.forEach(item => {
            str += `
            <dd data-did="${item.id}">${item.name}</dd>
            `
        })
        leftBox.innerHTML = str;

        let show = ``;
        const mainBox = document.querySelector('.main-item')
        res.data.productList.forEach(item => {
            show += `
            <li data-did='${item.id}'>
                <img src="${item.masterImg}" alt="">
                <h2>${item.name1}</h2>
                <h3>￥${item.mallPcPrice}</h3>
                <p>
                    <a class="toDetails" data-did='${item.id}'>查看详情</a>
                    <a class="toShopCart" data-did='${item.id}'>加入购物车</a>
                </p>
            </li>
            &
            `;
        })
        mainBox.addEventListener('click', e => {
            if (e.target.className === "toDetails") {
                window.sessionStorage.setItem('did', e.target.dataset.did)
                window.location.href = "./details.html"
            }
            if (e.target.className === "toShopCart") {
                const goodsId = e.target.dataset.did - 0
                toShopCart(goodsId);
            }
        })
        pagerHandler(show, mainBox)
    })
}

function others() {
    const logoBox = document.querySelector('.logo')
    logoBox.addEventListener('click', () => {
        window.location.href = "./index.html"
    })
}

//分页器
function pagerHandler(str, box) {
    // 先把数据扩充
    for (let i = 0; i < 5; i++) {
        str += str
    }
    str = str.split("&")
    // 点击下一页
    let current = 8;
    let pageCount = ~~(str.length / current)
    let count = 1;
    const pagerBox = document.querySelector(".pager")
    let ss = `
    <a class="first">首页</a>
    <ul class="select">
        <li data-num="${current}">${current}</li>
        <li data-num="4">4</li>
        <li data-num="8">8</li>
        <li data-num="12">12</li>
        <li data-num="16">16</li>
    </ul>
    <a class="add">+</a>
    <span>${count}</span>
    <a class="sup">-</a>
    <a class="last">尾页</a>
    <i>共${pageCount}页</i>
    `
    pagerBox.innerHTML = ss
    let a = (count - 1) * current;
    let b = count * current
    str1 = str.slice(a, b)
    str1 = str1.join('')
    box.innerHTML = str1;


    //分页事件
   
    pagerBox.addEventListener('click', e => {
        if (e.target.className === "first") {
            count = 1
        }
        if (e.target.className === "last") {
            count = pageCount
        }
        if (e.target.className === "add") {
            count >= pageCount ? pageCount : count++
        }
        if (e.target.className === "sup") {
            count <= 1 ? 1 : count--
        }
        if(e.target.nodeName==="LI"){
            current=e.target.dataset.num
            pageCount = ~~(str.length / current)
        }
        ss = `
        <a class="first">首页</a>
        <ul class="select">
            <li data-num="${current}">${current}</li>
            <li data-num="4">4</li>
            <li data-num="8">8</li>
            <li data-num="12">12</li>
            <li data-num="16">16</li>
        </ul>
        <a class="add">+</a>
        <span>${count}</span>
        <a class="sup">-</a>
        <a class="last">尾页</a>
        <i>共${pageCount}页</i>
        `
        a = (count - 1) * current;
        b = count * current
        pagerBox.innerHTML = ss
        str1 = str.slice(a, b)
        str1 = str1.join('')
        box.innerHTML = str1;
    })
}

//排序事件
function sortHandler(){
    const sortBox = document.querySelector(".sort")
    sortBox.addEventListener("click",e=>{
        [...sortBox.children].forEach(item=>{
            item.classList.remove('active')
            e.target.classList.add('active')
        })
        let sortId = e.target.dataset.sort;

        pAjax({
            url: 'https://www.lemall.com/api/cate/secondlist.html',
            data: {
                visitPath: `${urlid}-1-${sortId}`
            },
            dataType: 'json'
        }).then(res=>{
            let show = ``;
            const mainBox = document.querySelector('.main-item')
            res.data.productList.forEach(item => {
            show += `
            <li data-did='${item.id}'>
                <img src="${item.masterImg}" alt="">
                <h2>${item.name1}</h2>
                <h3>￥${item.mallPcPrice}</h3>
                <p>
                    <a class="toDetails" data-did='${item.id}'>查看详情</a>
                    <a class="toShopCart" data-did='${item.id}'>加入购物车</a>
                </p>
            </li>
            &
            `;
            pagerHandler(show, mainBox)

        })
        })

    })
}
